<template>
  <div class="demo-container">
    <h1 class="page-title">组件演示</h1>
    
    <!-- 按钮组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>按钮组件</span>
      </div>
      <div class="component-demo">
        <button-box type="primary" text="点击" @click="handleClick"></button-box>
        <button-box type="success" text="成功" @click="handleClick"></button-box>
        <button-box type="warning" text="警告" @click="handleClick"></button-box>
        <button-box type="danger" text="删除" @click="handleClick"></button-box>
        <button-box type="info" text="信息" @click="handleClick"></button-box>
        <button-box type="danger" text="删除确认" confirm="确定要删除这条记录吗？" @click="handleDelete"></button-box>
        <button-box type="primary" text="加载中" :loading="loading" @click="handleLoading"></button-box>
      </div>
    </el-card>
    
    <!-- 标签输入组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>标签输入组件</span>
      </div>
      <div class="component-demo">
        <div class="demo-block">
          <h3>基本用法</h3>
          <tags-input v-model="tags" placeholder="请输入标签"></tags-input>
          <div class="demo-result">当前标签: {{ tags }}</div>
        </div>
        
        <div class="demo-block">
          <h3>限制标签数量</h3>
          <tags-input 
            v-model="limitedTags" 
            :maxTags="3"
            placeholder="最多添加3个标签">
          </tags-input>
        </div>
        
        <div class="demo-block">
          <h3>自定义验证</h3>
          <tags-input 
            v-model="validatedTags"
            :validator="tagValidator"
            placeholder="只能输入字母和数字">
          </tags-input>
        </div>
      </div>
    </el-card>
    

    
    <!-- 上传组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>上传组件</span>
      </div>
      <div class="component-demo">
        <upload-box 
          action="https://jsonplaceholder.typicode.com/posts/"
          :headers="headers"
          @success="handleUploadSuccess"
          @error="handleUploadError">
        </upload-box>
        
        <upload-box 
          action="https://jsonplaceholder.typicode.com/posts/"
          :drag="true"
          accept=".jpg,.png,.gif"
          :limit="5"
          tip="只能上传jpg/png/gif文件，且不超过5个"
          @success="handleUploadSuccess">
        </upload-box>
      </div>
    </el-card>
    
    <!-- 对话框组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>对话框组件</span>
      </div>
      <div class="component-demo">
        <button-box type="primary" text="打开对话框" @click="showDialog"></button-box>
        
        <dialog-box 
          title="标题"
          :visible.sync="dialogVisible"
          width="30%"
          @confirm="handleDialogConfirm"
          @cancel="handleDialogCancel">
          <div>内容:<el-input></el-input></div>
        </dialog-box>
        
        <button-box type="primary" text="打开全屏对话框" @click="showFullDialog"></button-box>
        
        <dialog-box 
          title="全屏标题"
          :visible.sync="fullDialogVisible"
          :fullscreen="true"
          @confirm="handleDialogConfirm">
          <div>全屏对话框的内容</div>
        </dialog-box>
      </div>
    </el-card>
    
    <!-- 消息提示演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>消息提示</span>
      </div>
      <div class="component-demo">
        <button-box type="success" text="成功提示" @click="showSuccessMessage"></button-box>
        <button-box type="warning" text="警告提示" @click="showWarningMessage"></button-box>
        <button-box type="danger" text="错误提示" @click="showErrorMessage"></button-box>
        <button-box type="info" text="信息提示" @click="showInfoMessage"></button-box>
        <button-box type="primary" text="确认对话框" @click="showConfirmMessage"></button-box>
        <button-box type="primary" text="通知提示" @click="showNotification"></button-box>
      </div>
    </el-card>
    
    <!-- 加载组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>加载组件</span>
      </div>
      <div class="component-demo">
        <button-box type="primary" text="显示全屏加载" @click="showFullLoading"></button-box>
        <button-box type="primary" text="显示局部加载" @click="showLocalLoading"></button-box>
        <button-box type="primary" text="加载Promise" @click="loadWithPromise"></button-box>
      </div>
    </el-card>

    <!-- 分页组件演示 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>分页组件</span>
      </div>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.page"
          :page-sizes="pageSizes"
          :page-size.sync="listQuery.limit"
          :layout="paginationLayout"
          :total="total"
          @size-change="handlePaginationChange"
          @current-change="handlePaginationChange"
        />
      </div>
    </el-card>

    <!-- 添加骨架屏测试按钮 -->
    <el-card class="demo-card">
      <div slot="header">
        <span>骨架屏测试</span>
      </div>
      <div>
        <el-button type="primary" @click="testSkeleton">测试全局骨架屏</el-button>
        <el-button type="success" @click="testApiLoading">模拟API请求</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DemoPage',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      fullDialogVisible: false,
      headers: {
        'Authorization': 'Bearer demo-token'
      },
      pageSizes: [10, 20, 50, 100],
      paginationLayout: "total, sizes, prev, pager, next, jumper",
      paginationTimer: null,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      
      // 标签输入组件数据
      tags: ['Vue', 'Element UI', 'JavaScript'],
      limitedTags: ['最多', '三个', '标签'],
      validatedTags: ['abc123'],
      

    }
  },
  methods: {
    // 按钮演示
    handleClick() {
      this.$messageBox.success('按钮点击成功')
    },
    handleDelete() {
      this.$messageBox.success('删除成功')
    },
    handleLoading() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$messageBox.success('操作完成')
      }, 2000)
    },
    
    // 标签输入组件方法
    tagValidator(value) {
      if (!/^[a-zA-Z0-9]+$/.test(value)) {
        return '标签只能包含字母和数字'
      }
      return true
    },
    
    // 上传演示
    handleUploadSuccess(response) {
      this.$messageBox.success('上传成功')
      console.log('上传成功:', response)
    },
    handleUploadError(error) {
      this.$messageBox.error('上传失败')
      console.error('上传失败:', error)
    },
    
    // 对话框演示
    showDialog() {
      this.dialogVisible = true
    },
    showFullDialog() {
      this.fullDialogVisible = true
    },
    handleDialogConfirm() {
      this.$messageBox.success('确认操作')
      this.dialogVisible = false
      this.fullDialogVisible = false
    },
    handleDialogCancel() {
      this.$messageBox.info('取消操作')
    },
    
    // 消息提示演示
    showSuccessMessage() {
      this.$messageBox.success('这是一条成功消息')
    },
    showWarningMessage() {
      this.$messageBox.warning('这是一条警告消息')
    },
    showErrorMessage() {
      this.$messageBox.error('这是一条错误消息')
    },
    showInfoMessage() {
      this.$messageBox.info('这是一条信息消息')
    },
    showConfirmMessage() {
      this.$messageBox.confirm('确定要执行此操作吗？', '确认').then(() => {
        this.$messageBox.success('操作已确认')
      }).catch(() => {
        this.$messageBox.info('操作已取消')
      })
    },
    showNotification() {
      this.$messageBox.notifySuccess('操作成功', '通知')
    },
    
    // 加载演示
    showFullLoading() {
      this.$loadingBox.show('加载中...')
      setTimeout(() => {
        this.$loadingBox.hide()
      }, 2000)
    },
    showLocalLoading() {
      this.$loadingBox.showLocal('处理中...')
      setTimeout(() => {
        this.$loadingBox.hide()
      }, 2000)
    },
    async loadWithPromise() {
      try {
        const result = await this.$loadingBox.showWithPromise(
          new Promise(resolve => {
            setTimeout(() => {
              resolve({ success: true, data: 'Promise数据' })
            }, 2000)
          }),
          '加载数据中...'
        )
        this.$messageBox.success('加载完成: ' + JSON.stringify(result))
      } catch (error) {
        this.$messageBox.error('加载失败')
      }
    },

    // 分页演示
    handlePaginationChange() {
      if (this.paginationTimer) clearTimeout(this.paginationTimer)
      this.paginationTimer = setTimeout(() => this.getList(), 300)
    },
    getList() {
      this.$messageBox.info(`模拟分页请求，当前页: ${this.listQuery.page}, 每页数量: ${this.listQuery.limit}`)
      this.total = 100 // 模拟总数据量
      this.$messageBox.success(`模拟分页成功，共 ${this.total} 条数据`)
    },

    // 添加骨架屏测试按钮
    testSkeleton() {
      this.$store.dispatch('app/showLoading')
      setTimeout(() => {
        this.$store.dispatch('app/hideLoading')
        this.$messageBox.success('骨架屏测试完成')
      }, 2000)
    },
    testApiLoading() {
      // 模拟API请求
      this.$messageBox.info('正在发送请求...')
      setTimeout(() => {
        this.$messageBox.success('请求完成')
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.demo-card {
  margin-bottom: 20px;
}

.component-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  
  .el-button {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .demo-block {
    width: 100%;
    margin-bottom: 20px;
    
    h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 500;
      color: #606266;
    }
    
    .demo-result {
      margin-top: 10px;
      padding: 8px;
      background-color: #f5f7fa;
      border-radius: 4px;
      font-size: 14px;
      
      .color-box {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 2px;
        margin-right: 5px;
        vertical-align: middle;
        border: 1px solid #dcdfe6;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 